<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-row>
          <el-form-item label="设备名称:">
            <span>{{dataInfo.equipName}}</span>
          </el-form-item>
          <el-form-item label="设备昵称:">
            <span>{{dataInfo.equipNickName}}</span>
          </el-form-item>
          <el-form-item label="设备编号:">
             <span>{{dataInfo.equipCode}}</span>
          </el-form-item>
           <el-form-item label="设备类型:">
             <span>{{formatSafetyType(dataInfo.safetyType)}}</span>
          </el-form-item>
          <el-form-item label="MAC地址:">
             <span>{{dataInfo.equipMac}}</span>
          </el-form-item>
          <el-form-item label="接收器状态:">
            <span>{{formatSafetyState(dataInfo.equipState) }}</span>
          </el-form-item>
          <el-form-item label="异常状态:">
            <span style="color:red" v-if="dataInfo.errorState==1">异常警告</span>
          </el-form-item>
          <el-form-item label="联系地址:">
             <span>{{dataInfo.houseAddress}}</span>
          </el-form-item>
          <el-form-item label="设备出厂时间:">
             <span>{{dataInfo.deliveryDate}}</span>
          </el-form-item>
          <el-form-item label="备注:">
             <span>{{dataInfo.remark}}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName}}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName}}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
          <el-form-item label="二维码:">
            <img title="点击下载图片" @click="downloadByBlob(dataInfo.wxAppUrl,'用户小程序二维码')" :src="dataInfo.wxAppUrl" width="200" height="200" style="cursor:pointer">
          </el-form-item>
      </el-row>
      <div class="tit">
        <h2>心跳记录</h2>
      </div>
       <el-row>
          <el-table :data="dataInfo.safetyLogs" border :fit="true" highlight-current-row style="width:max-content" >
            <el-table-column type="index" label="序号" align="center" width="100px">

            </el-table-column>
            <el-table-column prop="equipName" label="设备名称" width="150px" align="center">

            </el-table-column>
            <el-table-column prop="createDate" label="心跳记录时间" width="200px" align="center">

            </el-table-column>
        </el-table>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import SafetyApi from '@/api/equip/safety';
export default {
  data() {
    return {
      dataInfo: {},
    };
  },
  computed:{
  },
  mounted(){
    this.getData()
  },
  methods: {
    getData() {
     SafetyApi.getSafetyInfo({id:this.$route.query.id}).then(res=>{
        this.dataInfo = res.data
      })
    },
    download(href, name) {
				let eleLink = document.createElement('a')
				eleLink.download = name
				eleLink.href = href
				eleLink.click()
				eleLink.remove()
			},
    downloadByBlob(url, name) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
      let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob)
          this.download(url, name)
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },
    formatSafetyState(cellValue){
        if (cellValue === 1) {
            return '待连接'
        } else if (cellValue === 2) {
            return '在线'
        } else if (cellValue === 3) {
            return '离线'
        }
    },
    formatSafetyType(cellValue){
        if(cellValue ===1){
        return "燃气报警器"
        }else if(cellValue==2){
        return "溢水报警器"
        }else if(cellValue ===3){
        return "烟雾报警器"
        }else if(cellValue ===4){
        return "温湿度报警器"
        }else if(cellValue === 5){
        return "红外报警器"
        }else if(cellValue ===6){
        return "门磁监测报警器"
        }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path:'/equip/safetyManagement'})
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
